<template>
	<view class="wrap">
		<block v-if="newInfo.data.length">
			<view class="main">
				<view class="card">
					<view class="title flex_sb">
						<view class="title_name">
							{{ newInfo.title }}
						</view>
					</view>
					<view class="body">
						<view class="info_item flex_sb" v-for="(item,index) in newInfo.data" :key="index">
							<text>{{ item.name }}</text>
							<text>{{item.value||''}}</text>
						</view>
					</view>
				</view>
			</view>
		</block>
		
		<block v-else>
			<view class="header">
				<view class="status_box flex_s">
					<view class="icon_box flex_c">
						<text class="iconfont icon-duihao"></text>
					</view>
					<view class="status_text">
						<text>{{info.extract_status_txt||''}}</text>
					</view>
				</view>
			
				<view class="tip_text">
					<text v-if="info.extract_status_txt==='待审核'">请等待平台审核信息</text>
					<text v-else>感谢您的支持与信，期待为您再次服务</text>
				</view>
			</view>
			<view class="main">
				<view class="card">
					<view class="title flex_sb">
						<view class="title_name">
							申请提现
						</view>
					</view>
					<view class="body">
						<view class="info_item flex_sb">
							<text>提现金额</text>
							<text>{{info.number||'0.00'}}</text>
						</view>
						<view class="info_item flex_sb">
							<text>提现方式</text>
							<text>{{info.extract_type||''}}</text>
						</view>
						<template v-if="info.extract_type=='银行卡'">
							<view class="info_item flex_sb" >
								<text>银行名称</text>
								<text>{{info.bank_address||''}}</text>
							</view>
							<view class="info_item flex_sb" >
								<text>银行卡号</text>
								<text>{{info.bank_code||''}}</text>
							</view>
						</template>
						<template v-else>
							<!-- <view class="info_item flex_sb">
								<text>收款码</text>
							</view>
							<view class="info_item flex_s">
								<view class="goods_img">
									<view class="img_item">
										<image :src="info.extract_code_url" mode="aspectFill"></image>
									</view>
								</view>
							</view> -->
							<view class="info_item flex_sb" >
								<text>姓名</text>
								<text>{{info.alipay_name||''}}</text>
							</view>
							<view class="info_item flex_sb" >
								<text>支付宝账号</text>
								<text>{{info.alipay_number||''}}</text>
							</view>
						</template>
						
						
					</view>
				</view>
				<view class="card">
					<view class="title flex_sb">
						<view class="title_name">
							账单信息
						</view>
					</view>
					<view class="body">
						<view class="info_item flex_sb">
							<text>提现时间</text>
							<text>{{info.extract_apply_time||''}}</text>
						</view>
						<view class="info_item flex_sb" v-if="info.audit_time">
							<text>审核时间</text>
							<text>{{info.audit_time||''}}</text>
						</view>
						<view class="info_item flex_sb" v-if="info.fail_msg">
							<text>驳回信息</text>
							<text>{{info.fail_msg||''}}</text>
						</view>
						<view class="info_item flex_sb" v-if="info.status==1&&info.user_remark_img">
							<text>提现凭证</text>
						</view>
						<view class="info_item flex_s" v-if="info.user_remark_img">
							<view class="goods_img">
								<view class="img_item">
									<image :src="info.user_remark_img" mode="aspectFill"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</block>

	</view>
</template>

<script>
	import {
		out_detail
	} from "@/api/new_api.js"
	export default {
		data() {
			return {
				params:{
					id:'',
					type:''
				},
				newInfo: {
					title: '',
					data: []
				},
				info: {}
			};
		},
		onLoad(option) {
			if(option.id){
				this.params.id=option.id
				this.out_detail()
			}
			
		},
		methods: {
			isEmpty(data) {
				return data == '' || JSON.stringify(data) == '[]' || JSON.stringify(data) == '{}'
			},
			out_detail() {
				out_detail(this.params).then((res) => {
					const { moneyInfo, new_moneyInfo } = res.data
					if(!this.isEmpty(new_moneyInfo)) {
						this.newInfo = new_moneyInfo
						return
					}
					this.info = moneyInfo
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding-bottom: 50rpx;

		.header {
			padding: 47rpx 43rpx;

			.status_box {
				margin-bottom: 24rpx;

				.icon_box {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					overflow: hidden;
					border: 4rpx solid #383838;
					margin-right: 18rpx;

				}

				.status_text {
					color: #383838;
					font-size: 38rpx;
					font-weight: 500;
				}

			}

			.tip_text {
				font-size: 26rpx;
				color: #939393;
			}
		}

		.main {
			padding: 0 15rpx;

			.card {
				padding: 30rpx 30rpx 40rpx;
				border-radius: 20rpx;
				background: #FFFFFF;
				overflow: hidden;
				margin-bottom: 26rpx;

				.body {
					font-size: 28rpx;
					color: #3B3A39;
					display: grid;
					grid-row-gap: 20rpx;

					.info_item {
						.goods_img {
							width: 100%;
							display: grid;
							grid-template-columns: repeat(3, 1fr);
							grid-row-gap: 20rpx;

							.img_item {
								width: 190rpx;
								height: 190rpx;
								border-radius: 20rpx;
								overflow: hidden;



								image {
									width: 100%;
									height: 100%;
								}
							}
						}
					}
				}

				.title {
					padding-bottom: 26rpx;
					margin-bottom: 16rpx;
					border-bottom: 2rpx solid #F6F6F6;

					.title_name {
						font-size: 28rpx;
						font-weight: 700;
						color: #3B3A39;
					}

					.order_no {
						font-size: 26rpx;
						color: #939393;

						.copy_icon {
							width: 40rpx;
							height: 40rpx;
							margin-left: 5rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}
					}
				}
			}
		}

	}
</style>